<template>
  <div class="points_mall2">
    <Banner></Banner>
    <!--人人为我，我为人人-->
    <!--<img src="../../assets/images/list_new/woweirenren.png" alt="暂无图片资源" class="ren">-->
    <!--<img src="../../assets/images/list_new/renrenweiwo.png" alt="暂无图片资源" class="wo">-->
    <!--人人为我，我为人人-->
    <mainContent :catname="catename">
      <div slot="menu_list">
        <dl>
          <dt class="menu_dt" :style="{backgroundImage: 'url(' + menu_bg + ')'}"><span class="iconfont icon-shijian"></span>{{catename}}</dt>
        </dl>
      </div>

      <div slot="inner_content" class="inner_content">
        <div class="page_con" style="padding-right: 0px">

          <!--子路由区域-->
          <!--监控视频-->
          <div class="montior_video">
            <div class="video_list">
              <div @click="toVideo2(item.link)" class="video_box" v-for="(item,index) in videoList" :key="index">
                <img style="object-fit: cover;width: 100%;height: 100%;"
                     :src="item.thumb" alt="">
                <p class="video_list_title">{{item.title}}</p>
              </div>
            </div>
          </div>
          <!--监控视频-->


          <!--子路由区域-->


        </div>




      </div>

    </mainContent>
    <footerBar></footerBar>
    <MainMenu></MainMenu>



  </div>
</template>

<script>
    import Banner from '../../components/bannder/Banner'
    import MainMenu from '../../components/mainmenu/MainMenu'
    import footerBar from '../../components/content/footerBar'
    import mainContent from '../../components/content/mainContent'
    import NoData from '@/components/nodata/NoData'
    export default {
        name: "MonitorVideo",
        components:{
          Banner,
          MainMenu,
          footerBar,
          mainContent,
          NoData
        },
        data(){
            return{
              catename:'',//获取标题和栏目的名字
              videoList:[],//监控视频列表
            }
          },


      created(){
        console.log('进入了监控视频？');
        this.menu_bg=this.$util.storage.get("menu_bg");
        this.catename = this.$route.query.name;
        this.getVideoList();

      },

      methods: {
        getVideoList() {
          let that = this;
          that.$http.get("api/ScreenkApi/getVideos?page=1&limit=10000&type=2", {vollege_id:that.$util.vollege_id}, r => {
            console.log('视频列表：', r.data.data);
            that.videoList = r.data.data;
          });
        },//获取视频列表
        toVideo2(url) {
          let that = this;
          console.log("视频:", url);
          that.$util.storage.set("videourl", url);
          that.$router.push('/video2?id=0');
        },//跳转到视频播放页面
      }






    }
</script>

<style scoped>

  .inner_content {
    box-sizing: border-box;
    padding-top: 60px;
  }

  .points_mall2{
    position: relative;
  }

  .ren {
    position: absolute;
    z-index: 999;
    top: 17%;
    left: 54%;
  }

  .wo {
    position: absolute;
    top: 17%;
    left: 20%;
    z-index: 999;

  }

  .menu_list {
    position: absolute;
    left: 0;
  }


  .son_menu {
    width: 150px;
    height: 54px;
    line-height: 54px;
    margin: 15px auto;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background: url('../../assets/images/page/son_menu.png') no-repeat left center;
    transition: all 0.3s ease-out;
  }

  .son_menu a {
    color: #fff;
  }

  .son_menu.hover {
    background: url('../../assets/images/page/son_menu_hover.png') no-repeat left center;
  }

  .menu_dd.have {
    transition: all 0.3s ease-in;
  }


  .montior_video {
    height: 641px;
    box-sizing: border-box;
    padding: 60px;
  }

  .video_list {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
  }

  .video_box {
    width: 298px;
    height: 240px;
    border-radius: 6%;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 40px;
    position: relative;
    margin-right: 25px;
  }
  .video_box:nth-child(4n+4){
    margin-right: 0px;
  }
  .video_list_title{
    position: absolute;
    bottom: 0px;
    color: #fff;
    padding: 1px 11px;

    background-color: rgb(0,0,0,.5);
    height: 60px;
    text-align: center;
    width: 300px;
    line-height: 47px;
  }



</style>
